<template>
  <div class="backView">
    <div v-if="status !== 0" class="statusView">
      <img class="imgView" :src="status === 1 ? '/web-hft-ee/static/img/m/pass_test.png' : '/web-hft-ee/static/img/m/nopass_test.png'" />
      <p class="statusLabel">{{status === 1 ? '购买成功' : '购买失败'}}</p>
      <div v-if="status === 1" style="margin-top: 24px;">
        <div class="backBtn" @click="backClick">返回</div>
      </div>
      <div v-else-if="status === 2" class="flex_center" style="margin-top: 24px;">
        <div class="backBtn" @click="backClick">返回</div>
        <div class="verifyBtn" @click="verifyOrder">我已付款</div>
      </div>
      <div></div>
    </div>
  </div>
</template>

<script>
  import {Toast} from 'vant'
  import {payTool} from '../../../utils/payTool'
  import BuyAPI from '../../../repo/api/BuyAPI'

  export default {
    name: 'result',

    data() {
      return {
        //微信支付回调
        prepayId: this.$route.query.prepayId || '',
        //支付结果 0为正在支付  1为支付成功  2为支付失败
        status: 0,
        backStatus: false,
      }
    },
    mounted () {
      history.pushState(null, null, document.URL);
      window.onpopstate = () => {
        if (this.backStatus) {
          history.go(-2)
        } else {
          history.pushState(null, null, document.URL);
        }
      };
      this.verifyOrder()
    },
    beforeDestroy() {
      window.onpopstate = () => {
      };
    },
    methods: {
      verifyOrder() {
        if (this.prepayId.length > 0) {
          Toast.loading({
            duration: 0,
            message: '正在验证订单',
            forbidClick: true,
            loadingType: 'spinner',
          })
          this.verifyAPI(3)
        }
      },
      verifyAPI(count) {

        setTimeout(() => {
          BuyAPI.orderConfirm(this.prepayId).then((result) => {
            let data = result.responseData
            if (data.status == 1) {
              Toast.clear()
              this.status = 1
            } else {
              if (count === 0) {
                Toast.clear()
                this.status = 2
              } else {
                this.verifyAPI(count - 1)
              }
            }
          }).catch((e) => {
            if (count === 0) {
              Toast.clear()
              this.status = 2
            } else {
              this.verifyAPI(count - 1)
            }
          })
        }, 2000)
      },
      backClick() {
        this.backStatus = true
        history.go(-1)
      }

    }
  }
</script>

<style scoped>
  .statusView {
    margin-top: 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .imgView {

  }
  .statusLabel {
    margin-top: 20px;
    color: #333333;
    font-size: 24px;
    font-weight: bold;
  }
  .backBtn {
    font-size: 16px;
    border-radius: 4px;
    width: 80px;
    height: 36px;
    background-color: #20a0ff;
    color: white;
    line-height: 36px;
    text-align: center;
  }
  .verifyBtn {
    font-size: 16px;
    border-radius: 4px;
    width: 80px;
    height: 36px;
    background-color: #D33B37;
    color: white;
    line-height: 36px;
    text-align: center;
    margin-left: 24px;
  }
</style>
